<script setup>
import { onMounted, onUnmounted } from "vue";
import router from "@/router/index";
import { _$, $, to } from "./index";

onMounted(() => {
  $.onSearch();
});

onUnmounted(() => {
  $.clean();
});
</script>

<template>
  <el-space direction="vertical" fill wrap class="w-fill" :size="20">
    <el-page-header @back="router.back()" size="small">
      <template #content>
        <span class="text-large font-600 mr-3">我的收藏</span>
      </template>
    </el-page-header>
    <el-card class="w-fill" shadow="never">
      <el-form
        label-width="auto"
        :inline="true"
        :model="_$.query.requestParam"
        size="small"
        class="demo-form-inline"
      >
        <el-form-item label="搜索条件">
          <el-input v-model="_$.query.requestParam.condition" clearable />
        </el-form-item>
        <el-form-item>
          <el-space wrap>
            <el-button @click="$.onReset">重置</el-button>
            <el-button type="primary" @click="$.onSearch">查询</el-button>
          </el-space>
        </el-form-item>
      </el-form>
    </el-card>

    <el-space direction="vertical" fill wrap class="w-fill" :size="20">
      <el-card
        v-for="item in _$.query.responseParam.records"
        :key="'recipe-card' + item.id"
        shadow="hover"
      >
        <template #header>
          <div class="card-header">
            <div style="display: flex; justify-content: space-between">
              <el-text>
                {{ item.recipeInfo.name }}
              </el-text>
              <el-button
                type="danger"
                icon="delete"
                size="small"
                link
                @click="$.onCancelCollection(item.id, item)"
              >
              </el-button>
            </div>
          </div>
        </template>
        <el-descriptions direction="vertical" :column="8">
          <el-descriptions-item label="食谱名称">
            {{ item.recipeInfo.name }}
          </el-descriptions-item>
          <el-descriptions-item label="食谱内容">
            {{ item.recipeInfo.content }}
          </el-descriptions-item>
          <el-descriptions-item label="食谱描述">
            {{ item.recipeInfo.text }}
          </el-descriptions-item>
          <el-descriptions-item label="食谱类型">
            {{ item.recipeInfo.typeId }}
          </el-descriptions-item>
          <el-descriptions-item label="食谱适宜人群">
            <el-tag
              type="success"
              v-for="item in item.recipeInfo.recipeCureDiseaseList"
            >
              {{ item.name }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="食谱会导致的过敏">
            <el-tag
              type="warning"
              v-for="item in item.recipeInfo.recipeAllergyList"
            >
              {{ item.name }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="食谱不适宜人群">
            <el-tag
              type="warning"
              v-for="item in item.recipeInfo.recipeDiseaseList"
            >
              {{ item.name }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="食谱图片信息" :span="3">
            <el-upload
              :class="{ disabled: true }"
              disabled
              v-model:file-list="item.recipeInfo.fileList"
              list-type="picture-card"
              :on-preview="$.onPreview"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
            <el-dialog v-model="_$.state.previewDialogVisible">
              <img w-full :src="_$.state.dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-space>
  </el-space>
</template>

<style scoped>
:v-deep(.disabled .el-upload--picture-card) {
  display: none !important;
}
</style>
